<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    {{--<meta name="viewport" content="width=device-width, initial-scale=1">--}}

    <title>记录查询</title>
    <script src="{{ asset('js/common.js') }}" type="text/javascript"></script>
    <!-- Fonts -->
    <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
    <link rel="stylesheet" href="{{ asset('css/style.css') }}">
    <script src="{{ asset('js/jquery.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/bootstrap.min.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/ewin.js') }}" type="text/javascript"></script>
    <script src="{{ asset('js/jweixin-1.0.0.js') }}" type="text/javascript"></script>

    <link href="{{ asset('css/bootstrap-datetimepicker.css') }}" rel="stylesheet"/>
    <script src="{{ asset('js/bootstrap-datetimepicker.js') }}" type="text/javascript"></script>

    <!-- Styles -->
    <style>
        .account-box {
            font-size: 16px;
            width: 100%;
        }

        .account-box .title {
            background: #dddddd9c;
            height: 50px;
            line-height: 50px;
        }

        .account-box .title span {
            padding-left: 20px;
            font-weight: bolder;
        }

        .account-box ul {
            list-style: none;
        }

        .account-box ul li {
            width: 100%;
            float: left;
            padding-left: 30px;
            height: 95px;
            line-height: 40px;
            margin-bottom: 15px;
            border-bottom: 1px solid #ddd;
        }

        .c-box .left{
            width: 80%;
            height: 95px;
            float: left;
        }
        .c-box .right{
            width: 20%;
            height: 95px;
            float: left;
            margin-top: 30px;
        }
        .c-box .right .total-fee{
            font-weight: bolder;
        }
        .account-box .account-title,.product-name, .time-detail {
            width: 100%;
            float: left;
            margin-top: -10px;
        }

        .account-box .account-class div {
            float: left;
            margin-right: 10px;
        }

        .clear {
            clear: both;
            height: 0;
            font-size: 1px;
            line-height: 0px;
        }

        .form-group {
            width: 100%;
            height: 50px;
            background: #dddddd9e;
        }

        .month-class {
            padding: 10px;
            float: left;
        }

        #user_date {
            width: 100px;
            float: left;
            margin-top: 5px;
            background: #FFF;
        }
        .total-fee .fa-tag{
            position: relative;
            top: -2px;
        }
        .btn-success{
            color: #fff;
            background-color: #FF6A00;
            border-color: #FF6A00;
        }
        .btn-info{
            color: #fff;
            background-color: #FF6A00;
            border-color: #FF6A00;
        }
    </style>
</head>
<body>
<div>
    <div class="account-box">

        <div class="account-list">
            <form class="form-inline" style="margin-bottom: 10px">
                <div class="form-group">
                    <label for="user_date" class="month-class">月份</label>
                    <input type="text" class="form-control" id="user_date"  readonly data-date-format="yyyy-mm">
                </div>
            </form>
            <ul class="list-inline">
            </ul>
            <div class="clear"></div>
        </div>
    </div>
</div>
<!-- loading -->
<div class="modal fade" id="loading" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" data-backdrop='static'>
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">提示</h4>
            </div>
            <div class="modal-body">
                正在加载，请稍候...<span id="result"></span>
            </div>
        </div>
    </div>
</div>
<!--模态框组件-->
<div class="modal fade" id="myModal" style="margin-top: 50px;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3>提示</h3>
            </div>
            <div class="modal-body">
                <p id="message-content"></p>
            </div>
            <div class="modal-footer">
                <button class="btn btn-info" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
</body>
</html>
<script>
    wx.config({
        debug: false,
        appId: '{{$configData['appId']}}',
        timestamp: '{{$configData['timestamp']}}',
        nonceStr: '{{$configData['nonceStr']}}',
        signature: '{{$configData['signature']}}',
        jsApiList: [
            'checkJsApi',
            'openAddress'
        ]
    });
    var openid = '{{$configData['openid']}}';
    $('#user_date').datetimepicker({
        format: 'yyyy-mm',
        autoclose: 1,
        startView: 3, // 这里就设置了默认视图为年视图
        minView: 3, // 设置最小视图为年视图
        // forceParse: 0,
        language: 'cn'
    }).on('changeDate',function(ev){
        var yearMonth =$("#user_date").val();
        if(yearMonth!=''){
            getList(yearMonth);
        }
    });
    $("#user_date").datetimepicker("setDate", new Date());
    var yearMonth = $('#user_date').val();
    getList(yearMonth);
    function getList(yearMonth){
        $('#loading').modal('show');
        $.ajax({
            type: "GET",
            contentType: "application/json;charset=UTF-8",
            headers: {
                'content-type': 'application/json'
            },
            url:  URL+'/record',
            timeout: 60000,
            data: {yearMonth: yearMonth,openid:openid},
            success: function (res) {
                var list = res.items;
                if(list.length==0){
                    $('#loading').modal('hide');
                    $("#message-content").text("暂无数据...");
                    $('.account-list .list-inline').empty();
                    $("#myModal").modal();
                    return;
                }
                var content ='';
                for (var i=0;i<list.length;i++) {
                    content += '<li class="c-box" id="'+list[i].i_id+'">' +
                        '<div class="left">' +
                            '<div class="account-title">'+list[i].vc_account+'</div>'+
                            '<div class="product-name">'+list[i].vc_product_name+'</div>' +
                            '<div class="time-detail"><span class="bind-time" style="margin-right: 30px;color:#999">'+list[i].dt_order_time+'</span></div>'+
                        '</div>' +
                        '<div class="right"><div class="total-fee"><span class="fa-tag">-</span>'+list[i].amount+'</div></div>' +
                        '</li>';
                }
                $('.account-list .list-inline').empty();
                $('.account-list .list-inline').append(content);
                $('#loading').modal('hide');
                $('.c-box').click(function (e) {
                    var id = $(this).attr('id');
                    $(location).attr('href', URL+'/rechargeDetail?id='+id);
                });
            },
            error: function () {
                $('#loading').modal('hide');
            }
        });
    }


</script>

